import { defineComponent, onMounted, PropType, reactive } from 'vue';
import { PieChart } from '@element-plus/icons-vue';
import API from '@/services';
import './index.scss';
//指标库详情业务组件
const ApplicationInfo = defineComponent({
  name: 'ApplicationInfo',
  components: { PieChart },
  props: {
    id: {
      type: String as PropType<string>
    }
  },
  setup: (props) => {
    const state = reactive({
      loading: false,
      dataList: [] as defs.ReportInfo[],
    });

    let getDictListById = async (id: any) => {
      const { code, data } = await API.derivedMetrics.getDerivedMetricsDictionaryApplication({ id });
      if (code === 200 && data) {
        state.dataList = data;
      }
    }

    onMounted(() => {
      getDictListById(props.id);
    })
    return () => {
      return (<div class="application-info-wrap" v-loading={state.loading}>
        {state.dataList.map(item => (
          <div class="app-items">
            <el-icon class="icon-wrap">
              <pie-chart />
            </el-icon>
            <span class="app-name">{item.catalogName}</span>
          </div>
        ))}
      </div>);
    }
  }
});

export default ApplicationInfo;